<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
</head>
<body>
<div>
  <table border="1">
    <caption>国产优秀纯电汽车</caption>
    <tr>
      <th>编号</th><th>名字</th>
      <th>价格</th><th>类型</th>
    </tr>
    <tr v-for="(Car,i) in arr">
      <td>{{i+1}}</td>
      <td>{{Car.name}}</td>
      <td>{{Car.price}}</td>
      <td>{{Car.type}}</td>
    </tr>
    <h1 v-for="Car in arr">{{Car.name}}------{{Car.price}}</h1>
  </table>
</div>
<script src="../js/vue.js"></script>
<script>
  let v= new Vue({
    el:"div",
    data:{arr:[{name:"比亚迪汉EV",price:250000,type:"轿车"},
        {name:"极氪001",price:300000,type:"轿跑"},
        {name:"蔚来",price:260000,type:"轿车"},
        {name:"哪吒",price:240000,type:"轿车"}]
    }
  })
</script>
</body>
</html>